<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看代码</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='highlight/11.11.1/styles/a11y-dark.min.css') }}">

    <style>
        /* 自定义行号样式 */
        /* 增加行号右侧内边距 *//* 分割线核心样式 */
        .hljs-ln-numbers {
            border-right: 1px solid #ccc; /* 设置右边框作为分割线 */
            padding-right: 15px; /* 增加一些内边距，让分割线与行号文字分开 */
            text-align: center; /* 行号居中对齐 */
            color: #9e9e9e; /* 行号颜色 */
            background-color: #000000; /* 行号背景 */
            padding-right: 15px !important; /* 调整此值控制间距 */
        }

        .hljs {
            font-family: 'Monaco', monospace;
        {#font-family: 'JetBrains Mono', monospace;#}{#font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', 'Andale Mono', monospace;#} font-size: 15px;
            background: #f8f8f8;
            border-radius: 8px;
            padding: 1.2em;
        }

        /* 代码块容器 */
        .code-container {
            position: relative;
            margin: 20px 0;
        }

        /* 复制按钮样式 */
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            background: #2f2f2f;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s;
            font-size: 14px;
        }

        .copy-btn:hover {
            opacity: 1;
            background: #444;
        }

        /* 复制成功提示 */
        .copy-notice {
            position: absolute;
            top: 40px;
            right: 10px;
            background: #4CAF50;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
<!-- 示例代码块 -->
<div class="code-container">
    <pre><code class="language-sql" style="background-color: black;">{{ content }}</code></pre>
</div>

<!-- 引入 Highlight.js -->
<script src="{{ url_for('static', filename='highlight/11.11.1/highlight.min.js') }}"></script>
<script src="{{ url_for('static', filename='highlight/highlightjs-line-numbers.min.js') }}"></script>
<script src="{{ url_for('static', filename='highlight/11.11.1/languages/sql.min.js') }}"></script>

<script>
    hljs.highlightAll();
    hljs.initLineNumbersOnLoad();
    /*
        if (navigator.clipboard && navigator.clipboard.writeText) {
            // 支持
            console.log("支持")
        } else {
            // 不支持，使用 fallback 方法
            console.log("不支持")
        }
        */
    // 兼容性检测与复制功能实现
    function copyToClipboard(text) {
        // 方案1：优先尝试现代 Clipboard API
        if (navigator.clipboard && navigator.clipboard.writeText) {
            return navigator.clipboard.writeText(text)
                .then(() => true)
                .catch(error => {
                    console.error("Clipboard API failed:", error);
                    return false; // 继续尝试降级方案
                });
        }
        // 方案2：降级到 document.execCommand('copy')
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            return new Promise((resolve) => {
                // 创建临时文本域
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed'; // 防止页面滚动
                textarea.style.opacity = '0';      // 不可见但可操作
                document.body.appendChild(textarea);
                textarea.select();

                try {
                    const success = document.execCommand('copy');
                    resolve(success);
                } catch (error) {
                    console.error("execCommand failed:", error);
                    resolve(false);
                } finally {
                    document.body.removeChild(textarea);
                }
            });
        }
        // 方案3：终极降级方案（兼容移动端）
        return new Promise((resolve) => {
            try {
                // 创建可选择的临时元素
                const div = document.createElement('div');
                div.contentEditable = true;
                div.style.position = 'fixed';
                div.style.opacity = '0';
                div.textContent = text;
                document.body.appendChild(div);
                // iOS 兼容处理
                const range = document.createRange();
                range.selectNodeContents(div);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                div.contentEditable = true;
                // 执行复制
                document.execCommand('copy');
                resolve(true);
            } catch (error) {
                console.error("Fallback copy failed:", error);
                resolve(false);
            } finally {
                document.body.removeChild(div);
            }
        });
    }

    function replaceSpecialChars(input) {
        //替换开头的\t字符
        input2 = input.replace(/^\t/g, '')
        //替换开头的(\n\t)连在一起的字符
        return input2.replace(/(\n\t)/g, '');
    }

    // DOM加载完成后添加复制按钮
    document.addEventListener('DOMContentLoaded', function () {
        // 为每个代码块添加复制按钮
        document.querySelectorAll('.code-container').forEach(container => {
            // 创建复制按钮
            const copyBtn = document.createElement('button');
            copyBtn.className = 'copy-btn';
            copyBtn.textContent = '复制';
            container.appendChild(copyBtn);

            // 创建成功提示
            const notice = document.createElement('div');
            notice.className = 'copy-notice';
            notice.textContent = '✓ 已复制!';
            container.appendChild(notice);

            // 添加点击事件
            copyBtn.addEventListener('click', async () => {
                // 获取代码文本
                const codeBlock = container.querySelector('code');
                const codeText = codeBlock.innerText;
                codeText2 = replaceSpecialChars(codeText);

                const success = await copyToClipboard(codeText2);
                if (success) {
                    // 显示成功提示
                    notice.style.display = 'block';
                    setTimeout(() => {
                        notice.style.display = 'none';
                    }, 2000);
                } else {
                    console.error('复制失败:', err);
                    alert('复制失败，请手动复制代码');
                }
            });
        });
    });
</script>
</body>
</html>